<template>
  <KView class="shop-mall-evaluate">
    <KView class="shop-mall-evaluate-info">
      <KView class="shop-evaluate-score">
        <KView class="shop-evaluate-score-value">{{shopData.score}}</KView>
        <KView class="shop-evaluate-score-label">商家评分</KView>
      </KView>
      <KView class="shop-evaluate-star">
        <KView class="clearfix">
          <KView>口味</KView>
          <KView class="shop-evaluate-star-value">
            <sys-star-text :star="shopData.tasteStar" :size="23"></sys-star-text>
          </KView>
          <KView style="color:#FF641F">{{shopData.tasteScore}}分</KView>
        </KView>
        <KView class="clearfix">
          <KView>包装</KView>
          <KView class="shop-evaluate-star-value">
            <sys-star-text :star="shopData.packStar" :size="23"></sys-star-text>
          </KView>
          <KView style="color:#FF641F">{{shopData.packScore}}分</KView>
        </KView>
      </KView>
      <KView class="shop-evaluate-rate">
        <KView class="shop-evaluate-rate-value">{{shopData.goodRate}}%</KView>
        <KView class="shop-evaluate-rate-label">客户满意度</KView>
      </KView>
    </KView>

    <KView class="shop-mall-evaluate-line"></KView>

    <KView class="shop-mall-evaluate-content">
      <sys-loading v-if="loading" :size="60"></sys-loading>
      <KView class="shop-mall-evaluate-btns">
        <shop-btn-group :btns="btnMenus" :cur-btn.sync="currentMenu"></shop-btn-group>
      </KView>
      <KView class="shop-mall-evaluate-list" v-if="evaluateList!==null" :key="`type_${currentMenu}`">
        <goods-evaluate v-if="evaluateList.length>0" :evaluate-list="evaluateList" :pagination="pagination" :next-data-fun="setEvaluateList">
        </goods-evaluate>
        <KView v-else class="shop-mall-evaluate-nodata flex-central">店铺宝贝在等你评价哦~</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import ShopMallApi from 'services/shopMallApi';

  import SysLoading from 'common/sysLoading';
  import SysStarText from 'common/sysStarText';
  import ShopBtnGroup from './shopBtnGroup';
  import GoodsEvaluate from 'views/goodsDetail/goodsEvaluate';

  import Pagination from 'models/pagination';

  export default {
    props: {
      shopData: {
        type: Object,
        required: true
      },
      params: {
        type: Object,
        required: true
      }
    },

    watch: {
      currentMenu() {
        this.pagination = new Pagination();
        this.resetEvaluateList();
      }
    },

    data() {
      return {
        loading: false,
        currentMenu: 'all',
        btnMenus: [{
          id: "all",
          label: "全部"
        }, {
          id: "hasImg",
          label: "有图"
        }, {
          id: "noImg",
          label: "无图"
        }],
        pagination: new Pagination(),
        evaluateList: null
      };
    },

    created() {
      this.resetEvaluateList();
    },

    methods: {
      resetEvaluateList() {
        this.loading = true;
        this.setEvaluateList(true).then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      setEvaluateList(isInit) {
        return ShopMallApi.getShopEvaluateList(this.shopData, this.currentMenu, this.pagination).then(evaluateList => {
          if (isInit) {
            this.evaluateList = evaluateList;
          } else {
            this.evaluateList.push(...evaluateList);
          }
          return evaluateList;
        });
      }
    },

    components: {
      SysLoading,
      SysStarText,
      ShopBtnGroup,
      GoodsEvaluate
    }
  };

</script>

<style lang="scss">
  .shop-mall-evaluate {
    padding-top: formatPx(40);
    height: calc(100% - #{formatPx(40)});

    .shop-mall-evaluate-info {
      padding: 0 formatPx(30);
      height: formatPx(88);
      display: flex;

      .shop-evaluate-score {
        width: formatPx(170);
        text-align: center;

        .shop-evaluate-score-value {
          color: #FF641F;
          font-size: formatPx(40);
          height: formatPx(58);
          line-height: formatPx(58);
          font-weight: bold;
        }

        .shop-evaluate-score-label {
          height: formatPx(30);
          line-height: formatPx(30);
          font-size: formatPx(24);
          color: #565961;
        }
      }

      .shop-evaluate-star {
        flex: 1;
        border-right: 1px solid #E5E5E5;
        padding-left: formatPx(25);

        >div {
          height: formatPx(44);
        }

        .clearfix {
          >div {
            float: left;
            height: 100%;
            font-size: formatPx(24);
            line-height: formatPx(44);
          }

          .shop-evaluate-star-value {
            width: formatPx(170);
            padding-top: formatPx(10);
            height: formatPx(23);
            margin: 0 formatPx(16);
          }
        }
      }

      .shop-evaluate-rate {
        width: formatPx(180);
        color: #b6b8bc;
        text-align: center;

        .shop-evaluate-rate-value {
          font-size: formatPx(40);
          height: formatPx(58);
          line-height: formatPx(58);
        }

        .shop-evaluate-rate-label {
          height: formatPx(30);
          line-height: formatPx(30);
          font-size: formatPx(24);
        }
      }
    }

    .shop-mall-evaluate-line {
      height: formatPx(14);
      margin-top: formatPx(30);
      background: #F4F4F4;
    }

    .shop-mall-evaluate-content {
      padding-top: formatPx(26);
      height: calc(100% - #{formatPx(158)});
      position: relative;

      .shop-mall-evaluate-btns {
        padding: 0 formatPx(30);
        height: formatPx(73);
      }

      .shop-mall-evaluate-list {
        margin-top: formatPx(23);
        height: calc(100% - #{formatPx(95)});
        padding: 0 formatPx(30);
        overflow: auto;

        .shop-mall-evaluate-nodata {
          height: 100%;
          text-align: center;
          font-size: formatPx(30);
          color: #999999;
        }
      }
    }
  }

</style>
